<template>
    <div class="collection-content">
        <collectTap :collecttype=collectTap></collectTap>
        <div class="tab-content">
            <div class="tab-content-in">
                <div class="top-cont">
                    <div class="left-info">全部卡券({{lis.length}}) <i class="icon"></i></div>
                    <div class="right-info">
                        <!--<a>一键清理</a>-->
                        <a class="a1" @click="managestatus= !managestatus">管理卡券 <i class="icon"></i></a>
                    </div>
                </div>
                <div class="card-con" v-if="lis.length>0">
                    <img src="../../../assets/personal/images/card-pic.png" alt="">
                    <div class="card-list">
                        <div class="same-box" v-for="item in lis" :key="item.id" @click="checkitem(item)">
                            <div class="zhe" v-show="managestatus"></div>
                            <i class="choose-icons" :class="{active: item.ischecked}" v-show="managestatus"></i>
                            <div class="left">
                                <div class="yhq">优惠券</div>
                            </div>
                            <div class="center">
                                <h4 class="title">{{item.goodsName}}</h4>
                                <p class="price">￥{{item.percentage | amountMin100(0)}}</p><!--换算-->
                                <p class="use">满{{item.score1}}元可用</p>
                            </div>
                            <div class="right">
                                <button class="btn">立即使用</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-con" v-else>
                    对不起暂无数据
                </div>
            </div>

            <div class="choose-content" v-show="managestatus">
                <div class="bottom-choose">
                    <div class="left-c" @click="allcheck">
                        <i class="icon" :class="{active: allchkstatus}"></i>全选
                    </div>
                    <div class="right-del" @click="deletesomeitem">删除</div>
                </div>
                <div class="choose-mc"></div>
            </div>
        </div>
        <navFooter :pageName="pageName"></navFooter>
    </div>
</template>
<style scoped>
    @import "../../../assets/personal/css/collection.css";
</style>
<script>
    import navFooter from '@/components/footer'
    import collectTap from '@/components/personal/collect_tap'

    export default {
        data() {
            return {
                pageName: "collect",
                lis: {},
                managestatus: false,
                allchkstatus: false,
                dels: [],
                collectTap: 3
            }
        },
        mounted() {

            this.$http.get(this.APIURL_PREFIX + '/api/wap/collection/page?page=1&rows=12&collectionType=3').then((response) => {
                console.log(response.data)
                var arr = response.data.data;
                arr.forEach(item => {
                    item.ischecked = false;
                })
                this.lis = arr;

            }).catch(function (err) {
                console.log(err)
            });
        },
        methods: {
            checkitem(item) {
                item.ischecked = !item.ischecked;
                if (!item.ischecked && this.allchkstatus) { this.allchkstatus = false }
            },
            allcheck() {
                this.allchkstatus = !this.allchkstatus
                this.lis.forEach(item => {
                    item.ischecked = this.allchkstatus;
                });
            },
            deletesomeitem() {
                this.dels.length = 0;
                this.lis.forEach(item => {

                    item.ischecked && this.dels.push(item.collectionId);
                });


                this.$http.post(this.APIURL_PREFIX + '/api/wap/collection/delete', $.param({ id: this.dels.join(','), type: this.collectTap })).then((response) => {
                    if (0 == response.data.code) {
                        this.lis = this.lis.filter(function (item) { return !item.ischecked });
                    }
                    else {
                        layer.msg(response.data.msg);
                    }
                }).catch(function (err) {
                    console.log(err)
                });

            }
        },
        components: {
            navFooter,
            collectTap
        },
    }
</script>
